<template>
	<view class="">
		<navbar title='全部BD' :back="true" bgColor="#fff" leftIconColor="#000"></navbar>
		<view style="background-color: #fff;padding: 20rpx 20rpx 0 20rpx;">
			<u-search placeholder="搜索BD" :showAction='false' bgColor='#fff' v-model="params.keyword" borderColor='#eee'
				color='#000' searchIcon='search' placeholderColor='#999999' searchIconColor='#999999' @search='search'>
			</u-search>
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view></view>
				<view style="width:500rpx;">
					<orderBy :optionlist="byList" @change="shopchange" />
				</view>
			</view>
		</view>
		<view style="padding: 20rpx;">
			<view v-for="(item,index) in shopList" :key="index" style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;margin-bottom: 20rpx;" @click="goNav(`/pages/sub/BDhome?id=${item.uid}&avatar=${item.avatar}&name=${item.nickname}`)">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<image :src="item.avatar" mode="" style="width: 64rpx;height: 64rpx;border-radius: 50%;"></image>
						<view style="color: #333;font-size: 28rpx;font-weight: 600;margin-left: 14rpx;">{{item.nickname}}</view>
					</view>
					<view style="display: flex;align-items: center;color: #999;font-size: 24rpx;">
						<view style="margin-right: 6rpx;">查看全部</view>
						<u-icon name="arrow-right" color="#666" size="12"></u-icon>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;padding: 0 20rpx;">
					<view style="text-align: center;">
						<view style="font-size: 20rpx;color:#999;">GMV(元)</view>
						<view style="font-size: 28rpx;color:#ff3f3f;margin-top: 10rpx;font-weight: 650;">{{item.gmv}}</view>
					</view>
					<view style="text-align: center;">
						<view style="font-size: 20rpx;color:#999;">订单数量</view>
						<view style="font-size: 28rpx;color:#ff3f3f;margin-top: 10rpx;font-weight: 650;">{{item.totalNum}}</view>
					</view>
					<view style="text-align: center;">
						<view style="font-size: 20rpx;color:#999;">获取佣金</view>
						<view style="font-size: 28rpx;color:#ff3f3f;margin-top: 10rpx;font-weight: 650;">{{item.totalNum}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/baseNavbar.vue'
	import orderBy from '@/components/jing-orderby/jing-orderby.vue'
	import {
		getBdInfoList
	} from "@/api/shopAuth.js"
	import {
		goNav
	} from '@/lib/Comment.js'
	export default{
		components:{
			navbar,
			orderBy
		},
		data(){
			return{
				params:{
					keyword:'',
					limit: 10,
					page: 1,
					load: true,
					orderType:1,
					byType:1,
				},
				shopList:[],
				byList:[
					{
						name: 'GMV',
						value: 1,
						isAsc: false,
						type: 1
					},
					{
						name: '哔滴次数',
						value: 2,
						isAsc: false,
						type: 1
					},
					{
						name: '订单数',
						value: 3,
						isAsc: false,
						type: 1,
					}
				],
			}
		},
		onLoad() {
			this.resetList()
		},
		methods:{
			goNav(url){
				goNav(url)
			},
			search(){
				this.resetList()
			},
			shopchange(e){
				console.log('e',e);
				this.params.orderType = e.value
				this.params.byType = e.isAsc?0:1
				this.resetList()
			},
			resetList() {
				this.params.page = 1
				this.shopList = []
				this.getList()
			},
			getList() {
				if (!this.params.load) {
					return;
				}
				this.params.load = false;
				getBdInfoList(this.params).then(res => {
					this.params.page++
					this.shopList = this.shopList.concat(res.data.list)
					console.log('11',this.shopList);
					this.params.load = true
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		height: 100%;
	}
</style>